<template>
  <el-card class="my-normal-form-bg">
    <div slot="header" class="page-title">
      <div class="title-icon"></div>
      <span>{{ pageTitle }}</span>
    </div>
    <div class="operate-form">
      <el-form ref="operateForm" :model="operateForm" label-width='82px'>
        <slot name="myRadio"></slot>
        <el-row :gutter="20">
          <template v-for="(element, index) in formList">
            <el-col v-if="element.type === 'MONTH_RANGE'" :key="index+'col'" :xs="24" :sm="12" :md="12" :lg="8" style="padding: 0;">
              <el-form-item :label="element.label" :prop="element.prop">
                <el-date-picker v-model="operateForm[element.prop]" type="monthrange" range-separator="至" :start-placeholder="element.label + '开始月'" :end-placeholder="element.label + '结束月'" :value-format="element.formate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col v-if="element.type === 'INPUT'" :key="index+'col'" :xs="24" :sm="12" :md="12" :lg="8" style="padding: 0;">
              <el-form-item :label="element.label" :prop="element.prop">
                <el-input v-model="operateForm[element.prop]" :placeholder="'请输入' + element.label" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="element.type === 'SELECT'" :key="index+'col'" :xs="24" :sm="12" :md="12" :lg="8" style="padding: 0;">
              <el-form-item :label="element.label" :prop="element.prop">
                <el-select v-model="operateForm[element.prop]" :placeholder="'请选择' + element.label" style="width: 100%;">
                  <el-option v-for="item in enumOpt[element.emunName]" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" style="opacity:0; height:52px; padding: 0;">占位</el-col>
          <div class="btn">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查 询</el-button>
            <el-button type="info" icon="el-icon-refresh" plain @click="handleReset">重 置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'NormalForm',
  props: {
    pageTitle: {
      type: String,
      default: '查询条件'
    },
    operateForm: {
      type: Object,
      default: () => {}
    },
    formList: {
      type: Array,
      default: () => []
    },
    enumOpt: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
    }
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery', this.operateForm);
    },
    handleReset() {
      this.$emit('handleReset');
    },
  },
}
</script>

<style lang="scss" scoped>
.my-normal-form-bg{
  padding: 16px;
  .page-title{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2A2A2A;
    margin-left: 10px;
    .title-icon{
      width: 8px;
      height: 22px;
      background-color: #082AFF;
      margin-right: 10px;
    }
  }
  .operate-form {
    position: relative;
    .btn {
      position: absolute;
      bottom: 0px;
      right: 10px;
      .el-button {
        margin: 0 0 10px 16px;
      }
    }
  }
  ::v-deep.el-card__header {
    padding: 8px 0 10px 0;
    border: 0;
  }
}
</style>
